<style rel="stylesheet/scss" lang="scss" scoped>
    .m-hread {
        width: 100%;
        height: 180px;
		border: 1px solid #E5E5E5;
        padding: 10px;
        .m-hread_step {
            width: 100%;
            display: flex;
            align-items: center;
            >span {
                color: #409EFF;
            }
        }
        .m-hread_s {
            width: 100%;
            display: flex;
            align-items: flex-start;
            .s_model-id {
                width: 100px;
                height: 100px;
                resize: none;
                font-size: 15px;
            }
        }
        .m-hread_btn {
            width: 100%;
            display: flex;
            margin-top: 20px;
            align-items: center;
        }
    }
</style>
<template>
    <div class="m-hread">
        <!--<div class="m-hread_step">
            <el-button type="primary" size="mini">同步车型数据</el-button>
            <el-button type="primary" size="mini">同步车型数据</el-button>
            <span class="m-l-10">车型数据库同步时间</span>
        </div>-->
        <div class="m-hread_s m-t-10">
            <span>车型ID: </span>
            <textarea class="s_model-id m-l-10 m-r-10" placeholder="车型ID可以输入多行" @input="textareaInput" v-model="modelValue"></textarea>
            <!-- <span class="m-r-10">or</span> -->
            <template>
                <el-select class="m-l-10" placeholder="请选择" v-model="brandId" @change="getBrandId" size="mini">
                    <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template>
                <el-select class="m-l-10" placeholder="请选择" v-model="seriesId" size="mini">
                    <el-option v-for="item in seriesList" :key="item.id" :label="item.seriesName" :value="item.id">
                    </el-option>
                </el-select>
            </template>
        </div>
        <div class="m-hread_btn">
            <el-button type="primary" size="mini" @click.stop.prevent="screenFn">筛选</el-button>
            <el-button type="primary" size="mini" @click.stop.prevent="resetFn">重置</el-button>
            <!--<el-button type="primary" size="mini"  @click.stop.prevent="batchExport">导出excel</el-button>-->
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                brandId: '',
                seriesId: '',
                modelValue: '',
                ids: '',
                brandList: [],
                seriesList: []
            }
        },
        created() {
            this.getBrandList()
        },
        methods: {
			// 导出export
			batchExport() {
				this.$emit('batchExport')
			},
			resetFn() {
				this.seriesList = []
				this.brandId = this.seriesId =  this.modelValue = this.ids = '' 
				this.$emit('screenFn')
			},
            getBrandId() {
                this.seriesId = ''
				this.$get({
					url: '/model/series/'+this.brandId,
					callback: res => {
						console.log(res)
						if (res.status === 200) {
							if(res.data.length > 0) {
								this.seriesList = res.data
							} else{
								this.$message({
									type: 'error',
									message: '没有相关品牌'
								})
							}
							
						}
					}
				})
				
            },
            getBrandList() {
				this.$get({
					url: 'model/brand/',
					callback: res => {
						console.log(res)
						if(res.status === 200) {
							this.brandList = res.data
						} else{ 
							this.$message({
								type: 'error',
								message: err.msg
							})
						}
					}
					
				})
               
            },
            screenFn() {
                let brandName = ''
                let seriesName = ''
                if (this.brandId) {
                    brandName = {
                        brand: this.brandList.filter((item) => {
                            return this.brandId == item.id
                        })[0].brandName
                    }
                }
                if (this.seriesId) {
                    seriesName = {
                        series: this.seriesList.filter((item) => {
                            return this.seriesId == item.id
                        })[0].seriesName
                    }
                }
                this.$emit('screenFn', this.ids, brandName, seriesName)
            },
            textareaInput() {
                let ids = []
                ids = this.getModelIds()
                this.ids = ids
                console.log(this.ids)
                console.log(444)
            },
            getModelIds() {
                let texts = [];
                texts = this.modelValue.split("\n");
                for (var i = 0; i < texts.length; i++) {
                    let id = 0
                    try {
                        id = Number.parseInt(texts[i].trim());
                    } catch (error) {}
                    if (Number.isNaN(id)) {
                        texts.splice(i, 1);
                    } else {
                        i++;
                    }
                }
                return texts;
            }
        },

    }
</script>
